<template>
  <div class="body">
    <div class="left-board">
      <el-form
        :model="form"
        ref="addViewRef"
        label-width="100px"
        :class="list.length == 0 ? 'm-empty' : ''"
        :label-position="labelPosition"
        :rules="addShortLinkrules"
      >
        <div
          style="
            overflow-x: hidden;
            overflow-y: auto;
            position: fixed;
            bottom: 0;
            left: 0;
            top: 0px;
            width: 60%;
            background: white;
            padding: 0 2%;
            min-height: 100vh;
          "
        >
          <div class="logo">{{ data.title }}</div>
          <div class="brief">{{ data.brief }}</div>
          <!-- <el-form-item label="操作台" prop="address">
            <el-input v-model="form.address" placeholder="请填写操作台号"></el-input>
          </el-form-item> -->

          <el-form-item style="margin-top:40px" label="评价学年" :rules="[
          { required: true, message: '请选择评价学年' }]" prop="testId">
            <el-select v-model="form.testId" placeholder="请选择评价学年" clearable>
              <el-option v-for="item in testList" :label="item.title" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="评价学生"
            :rules="[{ required: true, message: '请选择评价学生' }]"
            prop="studentNumbers"
          >
            <!-- <el-select v-model="form.studentNumbers" placeholder="请选择评价学生" clearable multiple> -->
            <el-select
              v-model="form.studentNumbers"
              placeholder="请选择评价学生"
              clearable
              @change="changeStudent"
            >
              <el-option
                v-for="item in studetPageInfo.list"
                :label="item.name"
                :value="item.studentNumber"
              ></el-option>
            </el-select>
          </el-form-item>

          <div v-for="(element, index) in list">
            <div :class="unselect - bg">
              <div class="sub-title">{{ index + 1 }}. {{ element.label }}</div>
              <div
                v-for="(item, idx) in element.children"
                class="children-item"
              >
                <el-form-item
                  :label="
                    index +
                    1 +
                    '.' +
                    (idx + 1) +
                    ' ' +
                    item.label +
                    '（' +
                    item.code +
                    '分）'
                  "
                  :rules="[{ required: true, message: '请选择分值' }]"
                >
                  <el-select v-model="item.score" placeholder="请填写选择分值">
                    <el-option :value="0"></el-option>

                    <el-option v-for="n in item.code" :value="n"></el-option>
                  </el-select>
                  <div class="sub-brief">
                    评价说明：{{
                      item.campusName == "null" ? "无" : item.campusName
                    }}
                  </div>
                  <div class="sub-brief">
                    判分原则：{{ item.detail == "null" ? "无" : item.detail }}
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>

        <div
          style="
            overflow-x: hidden;
            overflow-y: auto;
            position: fixed;
            left: 64%;
            top: 0vh;
            bottom: 0;
            width: 32%;
            padding: 20px 2%;
            height: 100vh;
            border-left: 1px solid #dedede;
          "
        >
        
          <el-form-item label="评价人" prop="remark">
            <el-input
              style="width: 100%"
              type="text"
              disabled
              rows="10"
              v-model="form.remark"
              :value="user.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="评价总结" prop="remark">
            <el-input
              style="width: 100%"
              type="textarea"
              rows="10"
              v-model="form.remark"
              placeholder="请填写评价总结"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="操作图片" prop="images">
            <el-upload :action="uploadImage" list-type="picture-card" :on-preview="handlePictureCardPreview"
              :on-remove="handleRemoveFile" :before-remove="beforeRemove" ref="uploadFile" :limit="300"
              :file-list="fileList" accept="image/*" multiple :on-success="onSuccess">
              <el-icon style="width: 100px; height: 100px;">
                <Plus />
              </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
              <img style="width: 100%" :src="dialogImageUrl" alt="" />
            </el-dialog>

          </el-form-item>
          <el-form-item label="试卷图片" prop="images2">

            <el-upload :action="uploadImage" list-type="picture-card" :on-preview="handlePictureCardPreview2"
              :on-remove="handleRemoveFile2" :before-remove="beforeRemove2" ref="uploadFile2" :limit="300"
              :file-list="fileList2" accept="image/*" multiple :on-success="onSuccess2">
              <el-icon style="width: 100px; height: 100px;">
                <Plus />
              </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible">
              <img style="width: 100%" :src="dialogImageUrl" alt="" />
            </el-dialog>

          </el-form-item>
          <el-form-item label="操作时间" prop="daterange">

            <div class="demo-time-range">
              <el-time-select v-model="startTime" :max-time="endTime" class="mr-4" placeholder="开始时间" start="07:30"
                step="00:01" end="22:30" />
              <div style="padding-left:10px;padding-right:10px">至</div>
              <el-time-select v-model="endTime" :min-time="startTime" placeholder="结束时间" start="07:30" step="00:01"
                end="22:30" />
            </div>
          </el-form-item> -->

          <!-- <el-form-item label="操作时间" prop="daterange">
            <el-date-picker v-model="form.daterange" type="datetimerange" value-format="HH:mm:ss" range-separator="到"
              unlink-panels="true" start-placeholder="开始时间" end-placeholder="结束时间">
            </el-date-picker>
          </el-form-item> -->
          <div class="mobile-btn" @click="saveAll()">提交</div>
        </div>
        <!-- </el-form-item> -->
      </el-form>
    </div>
  </div>
</template>
<script >
import draggable from "vuedraggable";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Eleme,
  Delete,
  Remove,
  Plus,
  CopyDocument,
} from "@element-plus/icons-vue";

import { httpService } from "@/utils/httpService";
import { vxRule } from "@/utils/validator";

export default {
  name: "custom-clone",
  display: "Custom Clone",
  order: 3,
  mounted() {
    this.uuid = this.$route.query.p;
    this.queryById();
    this.endTime = this.getCurrentDate();
    this.getPbTestList();
  },

  watch: {},

  components: {
    draggable,
    vxRule,
    Eleme,
    Delete,
    Remove,
    Plus,
    ElMessageBox,
    httpService,
    CopyDocument,
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      rightValue: [],
      fileList: [],
      fileList2: [],
      testList: [],
      dialogImageUrl: "",
      dialogVisible: false,
      deleteFileIndex: "",
      labelPosition: "top",
      rightValueStudent: [],
      teacherPageInfo: {},
      studetPageInfo: {},
      uploadImage:
        "/bitApi/javaApi/upload/uploadImage?token=" +
        sessionStorage.getItem("token"),
      title: "",
      isTimeControl: 0,
      isPassword: 0,
      uuid: "",
      data: {},
      isEmpty: true,
      list: [],
      startTime: "",
      endTime: "",
      images: [],
      images2: [],

      indexGlobal: -1,
      questionnaireId: 0,
      form: {
        address: "",
        studentNumbers: "",
        daterange: "",
        remark: "",
        testId: "",
      },
      // 校验规则
      addShortLinkrules: {
        address: vxRule(true, null, "blur"),
        daterange: vxRule(true, null, "blur"),
      },
    };
  },
  methods: {
    changeStudent(e) {
      httpService(
        "/javaApi/evAnswerDetail/queryByStudentNumber",
        {
          topId: this.uuid,
          studentNumber: e,
          testId:this.form.testId
        },
        "get"
      ).then((data) => {
        console.log(data);
        console.log(this.list);
        let clearList = this.list;
        //将所有的分值重置
        if (data.length > 0) {
          for (let i = 0; i < clearList.length; i++) {
            for (let j = 0; j < clearList[i].children.length; j++) {
              for (let k = 0; k < data.length; k++) {
                if (data[k].dpId == clearList[i].children[j].id) {
                  this.form.remark = data[k].remark;
                  clearList[i].children[j].score = data[k].score;
                  break;
                }
              }
            }
            this.list = clearList;
          }
        } else {
          for (let i = 0; i < clearList.length; i++) {
            for (let j = 0; j < clearList[i].children.length; j++) {
              this.form.remark = "";
              clearList[i].children[j].score = null;
            }
          }
        }
      });
    },
    getPbTestList() {
      httpService("/javaApi/pbTest/list/1/100", {}, "get").then((data) => {
        this.testList = data.list;
      });
    },
    getCurrentDate() {
      var d = new Date();
      var year = d.getFullYear();
      var month = d.getMonth();
      month = month + 1 > 12 ? 1 : month + 1;
      month = month > 9 ? month : "0" + month.toString();
      var day = d.getDate();
      var hour = d.getHours();
      hour = hour > 9 ? hour : "0" + hour.toString();
      var minute = d.getMinutes();
      minute = minute > 9 ? minute : "0" + minute.toString();
      var second = d.getSeconds();
      return `${hour}:${minute}`;
    },
    getCurrentMonth() {
      var d = new Date();
      var year = d.getFullYear();
      var month = d.getMonth();
      month = month + 1 > 12 ? 1 : month + 1;
      month = month > 9 ? month : "0" + month.toString();
      var day = d.getDate();
      var hour = d.getHours();
      hour = hour > 9 ? hour : "0" + hour.toString();
      var minute = d.getMinutes();
      minute = minute > 9 ? minute : "0" + minute.toString();
      var second = d.getSeconds();
      return `${year}-${month}-${day}`;
    },
    handleRemoveFile(e) {
      console.log(e);
      this.images.splice(this.deleteFileIndex, 1);
      console.log(this.images);
    },
    onSuccess(file) {
      console.log(file);
      file.original;
      this.images.push(file.url);
    },
    onSuccessFile(file) {
      console.log(file);
      file.original;
      this.images.push(file.url);
      console.log(this.images);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleRemoveFile2(e) {
      console.log(e);
      this.images2.splice(this.deleteFileIndex, 1);
      console.log(this.images2);
    },
    onSuccess2(file) {
      console.log(file);
      file.original;
      this.images2.push(file.url);
    },
    onSuccessFile2(file) {
      console.log(file);
      file.original;
      this.images2.push(file.url);
      console.log(this.images);
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    queryById() {
      httpService(
        "/javaApi/evReview/queryByEffectId",
        "id=" + this.uuid,
        "post"
      ).then((data) => {
        if (data != "") {
          this.data = data;
          if (data.id != null) {
            this.queryByReviewId();
            this.getStudentList(data.classId, data.gradeId, data.campus);
          } else {
            ElMessage.error("访问失败，暂无权限参与评价！");
          }
        } else {
          ElMessage.error("访问失败，暂无权限参与评价！");
        }
      });
    },

    getStudentList(classId, gradeId, campus) {
      httpService(
        "/javaApi/baseStudent/list/0/200",
        {
          classId: classId,
          gradeId: gradeId,
          campus: campus,
        },
        "get"
      ).then((data) => {
        this.studetPageInfo = data;
      });
    },

    // 可以添加一些自己的自定义事件，如清空内容
    clear() {
      this.form.daterange = "";
      this.form.studentNumbers = "";
      this.form.address = "";
      this.form.remark = "";
      this.images = [];
      this.images2 = [];
      // this.$refs.uploadFile2.clearFiles();
      // this.$refs.uploadFile.clearFiles();
      this.fileList2 = [];
      this.fileList = [];
      //将所有的分值重置
      let clearList = this.list;
      for (let i = 0; i < clearList.length; i++) {
        for (let j = 0; j < clearList[i].children.length; j++) {
          clearList[i].children[j].score = 0;
        }
      }
      this.list = clearList;
    },

    queryByReviewId() {
      httpService(
        "/javaApi/evReviewQuestion/queryFullTree",
        "reviewId=" + this.uuid,
        "post"
      ).then((data) => {
        if (data != "") {
          this.list = data;
        } else {
          // this.$router.push({
          //   path: "/noFound",
          // });
        }
      });
    },

    //保存所有
    saveAll() {
      console.log(this.images);
      console.log(this.images2);
      console.log(this.getCurrentMonth());
      this.form.daterange =
        this.getCurrentMonth() +
        " " +
        this.startTime +
        ":00," +
        this.getCurrentMonth() +
        " " +
        this.endTime +
        ":00";

      this.$refs.addViewRef.validate((valid) => {
        if (valid) {
          let flag = true;
          let num = "";
          for (let k = 0; k < this.list.length; k++) {
            if (
              this.list[k].children != null &&
              this.list[k].children.length > 0
            ) {
              for (let m = 0; m < this.list[k].children.length; m++) {
                if (this.list[k].children[m].score == null) {
                  flag = false;
                  num = k + 1 + "." + (1 + m);
                  break;
                }
              }
            }
          }
          if (flag) {
            let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
            let upList = JSON.stringify(this.list);
            let images = "";
            let images2 = "";
            for (let i = 0; i < this.images.length; i++) {
              images = images + "," + this.images[i];
            }
            for (let i = 0; i < this.images2.length; i++) {
              images2 = images2 + "," + this.images2[i];
            }
            params.append("rangeDate", this.form.daterange);
            params.append("studentNumbers", this.form.studentNumbers);
            params.append("reviewId", this.uuid);
            params.append("address", this.form.address);
            params.append("remark", this.form.remark);
            params.append("images", images);
            params.append("images2", images2);
            params.append("testId", this.form.testId);
            params.append("json", upList);
            httpService("/javaApi/evAnswerTop/add", params, "post", {
              "Content-Type": "application/x-www-form-urlencoded",
            }).then((data) => {
              if (data.code == 200) {
                ElMessage.success("提交成功");
                this.clear();
              }
            });
          } else {
            ElMessage.error("第[" + num + "]未填写，不能提交");
          }
        } else {
          ElMessage.error("存在未填写题目，不能提交");

          return false;
        }
      });
    },

    handleChange(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },
    handleChangeStudent(value, direction, movedKeys) {
      console.log(value, direction, movedKeys);
    },

    closeAll() {
      ElMessageBox.confirm("已保存本次修改吗？确定关闭吗？", "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.opener = null;
          window.open("", "_self");
          window.close();
        })
        .catch(() => {});
    },
  },
};
</script>
<style>
.el-form-item__label {
  font-size: 18px;
  color: #000;
}

.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin: 0 8px 8px 0;
  display: inline-block;
}

.el-upload--picture-card i {
  margin-top: 0px;
  font-size: 28px;
  color: #8c939d;
}

.el-transfer-panel {
  width: 230px;
}

.el-tabs__content {
  border-left: 1px solid #dedede;
}

.el-tabs__item.is-active.is-focus {
  border: 0px solid red;
}

.el-rate__icon {
  font-size: 30px;
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0 0 0px;
}

.el-radio {
  line-height: 32px;
}

.m-empty {
  /* background: url(../assets/center_bg_2.png) no-repeat; */
  background-repeat: no-repeat;
  background-position: center;
}

.el-switch__label span {
  line-height: 20px;
}

.el-switch {
  margin-left: 10px;
}

.el-divider {
  margin: 0px;
}

.el-select {
  width: 100%;
}

.el-upload--picture-card {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  cursor: pointer;
  vertical-align: top;
}
</style>
<style scoped>
.dateTimeRange {
  margin-bottom: 16px;
}

.mb-right {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 0px;
}

.ghost {
  border-top: 4px solid #409eff;
}

.mobile-btn {
  width: 100%;
  cursor: pointer;
  margin-top: 20px;
  padding-top: 15px;
  -moz-user-select: none;
  /*火狐*/
  margin-bottom: 30px;

  -webkit-user-select: none;
  /*webkit浏览器*/

  -ms-user-select: none;
  /*IE10*/

  -khtml-user-select: none;
  /*早期浏览器*/

  user-select: none;
  padding-bottom: 15px;
  background: #409eff;
  text-align: center;
  font-size: 18px;
  border-radius: 4px;
  color: white;
}

.body {
  background: white;
  width: 80%;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 100px;
}

h3 {
  color: #409eff;
}

.sub-brief {
  margin-top: 5px;
  font-size: 16px;
  color: #444;
  width: 100%;
}

.delete-btn {
  margin-top: 10px;
}

.add-btn {
  margin-left: 80px;
}

.index {
  padding: 10px 10px 20px 0px;
  color: #409eff;
}

.m-line {
  background: #f2f2f2;
  height: 1px;
  margin-bottom: 10px;
}

.index-left {
  padding: 5px;
}

.delete {
  float: right;
  cursor: pointer;
  color: #f56c6c;
  padding: 5px;
  margin: 15px;
}

.delete-children {
  float: right;
  cursor: pointer;
}

.select-bg {
  border: 1px solid #409eff;
  color: #606255;
  margin-top: 10px;
  background: white;
  border-radius: 4px;
}

.unselect-bg {
  border: 1px dashed #409eff;
  background: white;
  margin-top: 10px;
  color: #606255;
  border-radius: 4px;
}

.list-group-item-right {
  cursor: move;
  /* display: flex; */
  padding: 20px;
}

.list-group-item-right:hover {
  background: white;
  border-radius: 6px;
}

.operate {
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  float: right;
  text-align: right;
  font-size: 17px;
  padding-left: 20px;
  white-space: nowrap;
  background: white;
  padding-right: 20px;
}

.logo {
  color: #409eff;
  font-weight: 600;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.brief {
  color: #444;
  font-size: 16px;
  line-height: 24px;
  margin: 10px 0px;
}

.logo-bottom {
  border-top: solid #dedede 1px;
  border-right: solid #dedede 1px;
  height: calc(100vh - 60px);
  padding: 10px;
}

.demo-time-range {
  display: flex;
}

.list-group-item-left {
  cursor: move;
  width: 50%;
}

.list-group-item-left .components-item {
  display: inline-block;
  width: calc(100% - 8px);
  margin: 4px;
  -webkit-transition: -webkit-transform 0ms !important;
  transition: -webkit-transform 0ms !important;
  transition: transform 0ms !important;
  transition: transform 0ms, -webkit-transform 0ms !important;
}

.item {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.components-body:hover {
  border: 1px solid #409eff;
  color: #409eff;
}

.components-body {
  color: #707070;
  border: 1px solid #eaeaea;
  background-color: #fff;
  padding: 8px 10px;
  font-size: 16px;
  cursor: move;
  text-align: center;
  border-radius: 3px;
}

.components-title {
  font-size: 16px;
  color: #222;
  margin: 10px 2px;
  font-weight: bold;
}

.left-board {
}

.center-board {
  width: auto;
  background: white;
  text-align: center;
  padding: 20px;
  border-radius: 6px;
  opacity: 1;
  background: #ffffff;
  box-shadow: 0px 0px 4px 0px rgb(0 0 0 / 8%), 0px 2px 6px 0px rgb(0 0 0 / 6%),
    0px 4px 8px 2px rgb(0 0 0 / 4%);
}

.draggable {
  height: calc(100vh - 80px);
  width: auto;

  overflow: scroll;
  border-top: 1px solid #dedede;
  padding: 10px 10px 30px 10px;
}

.right-content {
  width: calc(100% - 37px);
  height: calc(100vh - 60px);
  padding: 10px;
  overflow: auto;
}

.el-form-item--default {
  --font-size: 14px;
  --el-form-label-font-size: var(--font-size);
  margin-bottom: 20px;
  margin-top: 10px;
  width: 100%;
}

.esign {
  max-width: 1000px;
  margin: auto;
  padding: 10px;
}

.esigh-btns button {
  color: #fff;
  height: 40px;
  width: 100px;
  font-size: 16px;
  margin-right: 10px;
  outline: none;
  border-radius: 4px;
  background: #f60;
  border: 1px solid transparent;
}

.esigh-btns button:active {
  color: #fff;
  box-shadow: 0px 0px 50px orangered inset;
}

.sub-title {
  font-size: 18px;
  color: #409eff;
}

.esigh-result {
  margin-top: 10px;
}

.esigh-result img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid #ececee;
}

.esignature {
  margin: 10px 0;
  border: 1px solid #79bbff;
  border-radius: 4px;
}

.el-tabs__header {
  padding: 0;
  position: relative;
  margin: 0px;
}

.children-item {
  padding-left: 10px;
}

h3 {
  padding-left: 10px;
}

.demo-form-inline {
  display: flex;
}
</style>

